<template>
	<view class="" v-if="info.id">



		<view style="background:#f3f4f6" class="p15">

			<u-swiper img-mode="aspectFit" v-if="info.sliderPicUrls && info.sliderPicUrls.length>1" name="picUrl" :list="info.sliderPicUrls" height="300">
			</u-swiper>
			<image v-else :src="info.sliderPicUrls[0]" style="height: 600rpx;margin: 0 auto;display: block;" mode="heightFix"></image>
		</view>
		<view class="p15">
			<view class="u-flex fz15 u-font-bold">
				DIY明细
			</view>
			<view class="fz13 mt5">
				<view class="u-flex u-f-jsb mt5" v-for="(item,index) in settleInfo.items" :key="index">
					{{item.spuName}}<span>￥{{item.price}}</span>
				</view>
			</view>
			<view class="u-flex mt15 fz15 u-font-bold u-f-jsb" v-if="settleInfo.price">
				合计<span style="color: #FF563B;">￥{{settleInfo.price.totalPrice}}</span>
			</view>

		</view>


		<view class="fixed-bottom p15 bt">
			<view class="u-flex">
				<view class="u-flex u-f1 u-f-jsb  pl20 pr30" style="text-align: center;">
					<view @click="toEdit">
						<u-icon name="edit-pen"></u-icon>
						<view>编辑</view>
					</view>
					<view @click="toList">
						<u-icon name="grid"></u-icon>
						<view>我的作品</view>
					</view>
					<view style="position: relative;">
						<u-icon name="zhuanfa"></u-icon>
						<view>发布分享</view>
						
						<button class="btn" open-type="share" style="position: absolute;top: 0;opacity: 0;">去分享</button>
					</view>

				</view>
				<view class="btn-sure" @click="buyNow">立即购买</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				settleInfo: {},
				info: {},

			}
		},

		onLoad(e) {
			this.getInfo(e.id)
		},
		onShow() {},

		methods: {
			toShare() {

				uni.redirectTo({
					url: '/pages/community/add?id=' + this.info.id
				})

				// 	this.$api.share_composition({
				// 		compositionId:this.info.id
				// 	}, res => {
				// 		if (res.code == 200) {
				// 			this.info = res.data

				// 			uni.showToast({
				// 				title: '发布成功！',
				// 				icon: 'none'
				// 			});
				// 		}else{

				// 			uni.showToast({
				// 				title: res.message,
				// 				icon: 'none'
				// 			});
				// 		}
				// 	})

			},
			toEdit() {

				uni.navigateTo({
					url: '/pages/diy/index?diyId=' + this.info.id
				})
			},
			toList() {
				uni.navigateTo({
					url: '/pages/user/works/index'
				})
			},
			getInfo(id) {


				this.$api.compositionDetail({
					id
				}, res => {
					if (res.code == 200) {
						this.info = res.data
					}
				})


				this.$api.orderSettlement({
					compositionId: id,
					count: 1
				}, res => {
					if (res.code == 200) {
						this.settleInfo = res.data
					} else {

						this.$common.errorToShow(res.message, ress => {
							// uni.navigateBack()
						})
					}
				})
			},


			buyNow: function() {

				uni.navigateTo({
					url: '/pages/product/confirm?compositionId=' + this.info.id
				})
			},
		}
	}
</script>

<style lang="scss">
	.btn-sure {

		width: 160rpx;
		text-align: center;
		background: #70B52C;
		padding: 24rpx 0;
		font-size: 28rpx;
		color: #FFFFFF;
		border-radius: 10px;
		font-weight: normal;
	}

	.module-btn {
		padding: 40rpx;

		.btn {
			background: #70B52C;
			border-radius: 16rpx;
			padding: 24rpx;
			font-size: 28rpx;
			color: #fff;
			margin-top: 24rpx;
		}

		.btn-buy {
			background: #2C9942;
		}
	}
</style>